<template>
  <div>
    <p>Person's name: {{ person.name }}</p>
    <p>Person's age: {{ person.age }}</p>

    <!-- 假设这里有一些可以修改 person 对象的操作 -->
    <button @click="changePerson">Change Person</button>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'

const person = ref({
  name: 'John Doe',
  age: 30
})

// 深度监听 person 对象
watch(
  () => person.value,
  (newVal, oldVal) => {
    console.log('Person object has changed:')
    console.log('New Value:', newVal)
    console.log('Old Value:', oldVal)
  },
  { deep: true } // 启用深度监听
)

// 假设的修改 person 对象的方法
const changePerson = () => {
  person.value.name = 'Jane Doe' // 这会触发深度监听
  // person.value = { ... }; // 直接修改 person.value 的引用不会触发深度监听，除非再次启用深度监听
}
</script>
